packages/query-devtools/src/Devtools.tsx (2)

2053-2058: ⚠️ Potential issue | 🟡 Minor

Inconsistent: QueryDetails still uses unsafe toLocaleTimeString().

This code path can still throw a RangeError if the browser reports an invalid locale. For consistency with the mutation formatting changes, consider using the safe locale helper here as well.

Suggested fix

Add useLocale() to QueryDetails and update the formatting:

 const QueryDetails = () => {
+  const locale = useLocale()
   const theme = useTheme()
   // ...
             <span>
-              {new Date(activeQueryState()!.dataUpdatedAt).toLocaleTimeString()}
+              {formatDateTime(activeQueryState()!.dataUpdatedAt, locale.locale())}
             </span>

Note: You may want a formatTime helper if you prefer time-only output, or adjust formatDateTime to accept a format option.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/query-devtools/src/Devtools.tsx` around lines 2053 - 2058,
QueryDetails currently calls new
Date(activeQueryState()!.dataUpdatedAt).toLocaleTimeString() which can throw a
RangeError for invalid locales; update QueryDetails to use the safe locale
helper by importing and calling useLocale() (or retrieving the locale via
existing hook) and then format the timestamp with the existing formatDateTime or
a new formatTime helper instead of toLocaleTimeString; replace the direct
Date.toLocaleTimeString call with
formatDateTime(activeQueryState()!.dataUpdatedAt, { locale }) or
formatTime(activeQueryState()!.dataUpdatedAt, locale), and if needed adjust
formatDateTime signature to accept a time-only option.

---

2495-2502: ⚠️ Potential issue | 🟡 Minor

Inconsistent: MutationDetails still uses unsafe toLocaleTimeString().

Same issue as in QueryDetails. This "Submitted At" display can throw if the browser has an invalid locale.

Suggested fix

 const MutationDetails = () => {
+  const locale = useLocale()
   const theme = useTheme()
   // ...
             <span>
-              {new Date(
-                activeMutation()!.state.submittedAt,
-              ).toLocaleTimeString()}
+              {formatDateTime(activeMutation()!.state.submittedAt, locale.locale())}
             </span>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/query-devtools/src/Devtools.tsx` around lines 2495 - 2502, The
"Submitted At" render in Devtools.tsx uses new
Date(activeMutation()!.state.submittedAt).toLocaleTimeString(), which can throw
for invalid locales; update the MutationDetails rendering to format the date
safely by wrapping the toLocaleTimeString call in a try/catch (or using
Intl.DateTimeFormat with a safe fallback) and falling back to a stable
representation like toISOString() or a hardcoded locale (e.g., 'en-US') if
formatting fails; locate the code around activeMutation(), state.submittedAt and
replace the unsafe toLocaleTimeString usage with the safe formatter and fallback
logic so the component never throws when rendering timestamps.